<template>
  <div class="borrow-system-container">
    <div class="borrow-system-header">
      <div class="header-content">
        <div class="ancient-title">档案借阅系统</div>
        <div class="header-subtitle">规范借阅 · 智能管理 · 安全监控</div>
      </div>
    </div>

    <div class="route-info">
      <a-breadcrumb>
        <a-breadcrumb-item
          ><router-link to="/files"><FolderOutlined />档案文件管理</router-link></a-breadcrumb-item
        >
        <a-breadcrumb-item><AuditOutlined />{{ $route.meta.title }}</a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <div class="stats-section">
      <a-row :gutter="[20, 20]">
        <a-col :xs="24" :sm="6">
          <div class="stat-card">
            <BookOutlined class="stat-icon" />
            <div>
              <div class="stat-title">在借档案</div>
              <div class="stat-value">{{ borrowStats.borrowedFiles }}</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="6">
          <div class="stat-card">
            <UserOutlined class="stat-icon" />
            <div>
              <div class="stat-title">借阅用户</div>
              <div class="stat-value">{{ borrowStats.borrowUsers }}</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="6">
          <div class="stat-card">
            <ClockCircleOutlined class="stat-icon" />
            <div>
              <div class="stat-title">逾期档案</div>
              <div class="stat-value">{{ borrowStats.overdueFiles }}</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="6">
          <div class="stat-card">
            <CheckCircleOutlined class="stat-icon" />
            <div>
              <div class="stat-title">归还率</div>
              <div class="stat-value">{{ borrowStats.returnRate }}%</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <div class="modules-section">
      <h3 class="section-title">档案借阅功能</h3>
      <a-row :gutter="[24, 24]">
        <a-col :xs="24" :lg="12">
          <div class="module-card" @click="navigateToModule('/files/borrow-system/borrow-process')">
            <div class="module-header">
              <FormOutlined class="module-icon" />
              <div class="module-title">借阅申请流程</div>
            </div>
            <div class="module-description">在线提交借阅申请，智能审批流程，快速响应用户需求</div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="stat-label">今日申请：</span>
                <span class="stat-value">{{ moduleStats.borrowProcess.todayApplications }}份</span>
              </div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :lg="12">
          <div class="module-card" @click="navigateToModule('/files/borrow-system/term-management')">
            <div class="module-header">
              <CalendarOutlined class="module-icon" />
              <div class="module-title">借阅期限管理</div>
            </div>
            <div class="module-description">灵活的期限设置，自动续期提醒，逾期预警机制</div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="stat-label">即将到期：</span>
                <span class="stat-value">{{ moduleStats.termManagement.soonExpire }}份</span>
              </div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :lg="12">
          <div class="module-card" @click="navigateToModule('/files/borrow-system/return-reminder')">
            <div class="module-header">
              <BellOutlined class="module-icon" />
              <div class="module-title">归还提醒功能</div>
            </div>
            <div class="module-description">智能提醒系统，多渠道通知，降低逾期风险</div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="stat-label">提醒发送：</span>
                <span class="stat-value">{{ moduleStats.returnReminder.remindersToday }}次</span>
              </div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :lg="12">
          <div class="module-card" @click="navigateToModule('/files/borrow-system/damage-compensation')">
            <div class="module-header">
              <ExclamationCircleOutlined class="module-icon" />
              <div class="module-title">损坏赔偿处理</div>
            </div>
            <div class="module-description">档案损坏评估，赔偿标准制定，损失追偿管理</div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="stat-label">待处理：</span>
                <span class="stat-value">{{ moduleStats.damageCompensation.pendingCases }}起</span>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <div class="recent-borrows">
      <a-card title="最新借阅记录" :bordered="false">
        <a-table :columns="borrowColumns" :data-source="recentBorrows" :pagination="{ pageSize: 8 }">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'status'">
              <a-tag :color="getStatusColor(record.status)">{{ record.status }}</a-tag>
            </template>
          </template>
        </a-table>
      </a-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { HomeOutlined, FolderOutlined, AuditOutlined, BookOutlined, UserOutlined, ClockCircleOutlined, CheckCircleOutlined, FormOutlined, CalendarOutlined, BellOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue'

const router = useRouter()

const borrowStats = reactive({
  borrowedFiles: 2456,
  borrowUsers: 856,
  overdueFiles: 23,
  returnRate: 98.5
})

const moduleStats = reactive({
  borrowProcess: { todayApplications: 67 },
  termManagement: { soonExpire: 145 },
  returnReminder: { remindersToday: 89 },
  damageCompensation: { pendingCases: 3 }
})

const borrowColumns = [
  { title: '借阅者', dataIndex: 'borrower', key: 'borrower' },
  { title: '档案名称', dataIndex: 'fileName', key: 'fileName' },
  { title: '借阅时间', dataIndex: 'borrowTime', key: 'borrowTime' },
  { title: '归还期限', dataIndex: 'returnDeadline', key: 'returnDeadline' },
  { title: '状态', key: 'status' }
]

const recentBorrows = ref([
  { borrower: '李时珍', fileName: '生死簿第123卷', borrowTime: '2023-12-01', returnDeadline: '2023-12-15', status: '在借' },
  { borrower: '王守仁', fileName: '业力评定册', borrowTime: '2023-12-01', returnDeadline: '2023-12-10', status: '已归还' },
  { borrower: '苏东坡', fileName: '轮回转世档案第45卷', borrowTime: '2023-11-28', returnDeadline: '2023-12-12', status: '在借' },
  { borrower: '白居易', fileName: '修行功德记录册', borrowTime: '2023-11-26', returnDeadline: '2023-12-10', status: '已归还' },
  { borrower: '杜甫', fileName: '阴曹地府管理条例', borrowTime: '2023-11-25', returnDeadline: '2023-12-09', status: '在借' },
  { borrower: '李白', fileName: '十殿阎王案例汇编', borrowTime: '2023-11-24', returnDeadline: '2023-12-08', status: '已归还' },
  { borrower: '陆游', fileName: '灵魂救赎计划档案', borrowTime: '2023-11-23', returnDeadline: '2023-12-07', status: '在借' },
  { borrower: '辛弃疾', fileName: '地狱管理运营手册', borrowTime: '2023-11-22', returnDeadline: '2023-12-06', status: '已归还' },
  { borrower: '岳飞', fileName: '功德转换标准文档', borrowTime: '2023-11-21', returnDeadline: '2023-12-05', status: '在借' },
  { borrower: '文天祥', fileName: '审判程序操作指南', borrowTime: '2023-11-20', returnDeadline: '2023-12-04', status: '已归还' },
  { borrower: '范仲淹', fileName: '超度仪式档案集', borrowTime: '2023-11-19', returnDeadline: '2023-12-03', status: '在借' },
  { borrower: '欧阳修', fileName: '六道轮回分配原则', borrowTime: '2023-11-18', returnDeadline: '2023-12-02', status: '已归还' },
  { borrower: '王安石', fileName: '业力评估标准手册', borrowTime: '2023-11-17', returnDeadline: '2023-12-01', status: '在借' },
  { borrower: '司马光', fileName: '地府组织架构文档', borrowTime: '2023-11-16', returnDeadline: '2023-11-30', status: '已归还' },
  { borrower: '韩愈', fileName: '古代修行典籍汇编', borrowTime: '2023-11-15', returnDeadline: '2023-11-29', status: '在借' },
  { borrower: '柳宗元', fileName: '鬼神管理条例', borrowTime: '2023-11-14', returnDeadline: '2023-11-28', status: '已归还' },
  { borrower: '曾巩', fileName: '奖惩制度实施细则', borrowTime: '2023-11-13', returnDeadline: '2023-11-27', status: '在借' },
  { borrower: '晏殊', fileName: '转世申请审批流程', borrowTime: '2023-11-12', returnDeadline: '2023-11-26', status: '已归还' },
  { borrower: '晏几道', fileName: '生死簿记录规范', borrowTime: '2023-11-11', returnDeadline: '2023-11-25', status: '在借' },
  { borrower: '秦观', fileName: '黄泉路管理手册', borrowTime: '2023-11-10', returnDeadline: '2023-11-24', status: '已归还' },
  { borrower: '周邦彦', fileName: '忘川河运营指南', borrowTime: '2023-11-09', returnDeadline: '2023-11-23', status: '在借' },
  { borrower: '李清照', fileName: '奈何桥维护档案', borrowTime: '2023-11-08', returnDeadline: '2023-11-22', status: '已归还' },
  { borrower: '朱熹', fileName: '道德经修行注解', borrowTime: '2023-11-07', returnDeadline: '2023-11-21', status: '在借' },
  { borrower: '陆九渊', fileName: '心学修行要诀', borrowTime: '2023-11-06', returnDeadline: '2023-11-20', status: '已归还' },
  { borrower: '张载', fileName: '气学理论典籍', borrowTime: '2023-11-05', returnDeadline: '2023-11-19', status: '在借' },
  { borrower: '程颢', fileName: '理学修行指南', borrowTime: '2023-11-04', returnDeadline: '2023-11-18', status: '已归还' },
  { borrower: '程颐', fileName: '伊川学案档案', borrowTime: '2023-11-03', returnDeadline: '2023-11-17', status: '在借' },
  { borrower: '邵雍', fileName: '易学预测典籍', borrowTime: '2023-11-02', returnDeadline: '2023-11-16', status: '已归还' },
  { borrower: '周敦颐', fileName: '太极图说注释', borrowTime: '2023-11-01', returnDeadline: '2023-11-15', status: '在借' },
  { borrower: '张九龄', fileName: '唐代官制档案', borrowTime: '2023-10-31', returnDeadline: '2023-11-14', status: '已归还' }
])

// 新增：借阅统计详细数据
const borrowDetailStats = reactive({
  monthlyBorrowTrend: [
    { month: '1月', borrows: 1234, returns: 1198 },
    { month: '2月', borrows: 1456, returns: 1423 },
    { month: '3月', borrows: 1567, returns: 1534 },
    { month: '4月', borrows: 1678, returns: 1645 },
    { month: '5月', borrows: 1789, returns: 1756 },
    { month: '6月', borrows: 1890, returns: 1867 },
    { month: '7月', borrows: 1987, returns: 1954 },
    { month: '8月', borrows: 2098, returns: 2065 },
    { month: '9月', borrows: 2134, returns: 2101 },
    { month: '10月', borrows: 2245, returns: 2212 },
    { month: '11月', borrows: 2356, returns: 2323 },
    { month: '12月', borrows: 2467, returns: 2434 }
  ],
  borrowerTypes: [
    { type: '阎王', count: 145, percentage: 16.9 },
    { type: '判官', count: 234, percentage: 27.3 },
    { type: '鬼差', count: 198, percentage: 23.1 },
    { type: '书记官', count: 156, percentage: 18.2 },
    { type: '其他仙官', count: 123, percentage: 14.4 }
  ],
  popularArchives: [
    { name: '生死簿', borrowCount: 456, popularity: 85.3 },
    { name: '业力档案', borrowCount: 345, popularity: 64.5 },
    { name: '审判记录', borrowCount: 234, popularity: 43.7 },
    { name: '轮回档案', borrowCount: 189, popularity: 35.3 },
    { name: '功德记录', borrowCount: 156, popularity: 29.1 },
    { name: '修行典籍', borrowCount: 123, popularity: 23.0 },
    { name: '管理条例', borrowCount: 98, popularity: 18.3 },
    { name: '操作手册', borrowCount: 76, popularity: 14.2 }
  ]
})

// 新增：系统运行数据
const systemMetrics = reactive({
  totalBorrows: 28965,
  totalReturns: 28234,
  totalOverdue: 234,
  averageBorrowDays: 12.5,
  systemUptime: 99.97,
  processingSpeed: 156,
  userSatisfaction: 96.8,
  errorRate: 0.12
})

const navigateToModule = (path) => {
  router.push(path)
}

const getStatusColor = (status) => {
  const colorMap = {
    在借: 'processing',
    已归还: 'success',
    逾期: 'error'
  }
  return colorMap[status] || 'default'
}
</script>

<style lang="scss" scoped>
.borrow-system-container {
  padding: 24px;

  .borrow-system-header {
    text-align: center;
    margin-bottom: 32px;

    .header-content {
      .ancient-title {
        font-size: 32px;
        font-weight: bold;
        color: $secondary-color;
        margin-bottom: 8px;
        text-shadow: 0 0 20px rgba(212, 153, 10, 0.3);
      }

      .header-subtitle {
        font-size: 16px;
        color: $text-secondary;
        letter-spacing: 2px;
      }
    }
  }

  .route-info {
    margin-bottom: 24px;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid rgba(212, 153, 10, 0.2);
  }

  .stats-section {
    margin-bottom: 32px;

    .stat-card {
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      display: flex;
      align-items: center;
      gap: 12px;

      .stat-icon {
        font-size: 32px;
        color: $secondary-color;
      }

      .stat-title {
        font-size: 14px;
        color: $text-secondary;
        margin-bottom: 4px;
      }

      .stat-value {
        font-size: 24px;
        font-weight: bold;
        color: $primary-color;
      }
    }
  }

  .modules-section {
    margin-bottom: 32px;

    .section-title {
      font-size: 20px;
      font-weight: bold;
      color: $primary-color;
      margin-bottom: 24px;
    }

    .module-card {
      border-radius: 16px;
      padding: 24px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      transition: all 0.3s ease;
      cursor: pointer;
      height: 100%;

      .module-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;

        .module-icon {
          font-size: 24px;
          color: $secondary-color;
        }

        .module-title {
          font-size: 18px;
          font-weight: bold;
          color: $primary-color;
        }
      }

      .module-description {
        color: $text-secondary;
        line-height: 1.6;
        margin-bottom: 16px;
      }

      .module-stats {
        .stat-item {
          display: flex;
          justify-content: space-between;

          .stat-label {
            color: $text-secondary;
            font-size: 14px;
          }

          .stat-value {
            color: $secondary-color;
            font-weight: bold;
            font-size: 14px;
          }
        }
      }
    }
  }

  .recent-borrows {
    :deep(.ant-card) {
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      border-radius: 12px;
    }
  }
}
</style>
